<script>
// 数据预览
export default {
  name: 'DataPreview',
  props: {
    dbName: {
      type: String,
      default: '',
    },
    dataSheetName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      columns: [],
      data: [],
    };
  },
  watch: {
    async dbName(newVal) {
      if (newVal.length !== 0) {
        this.columns = [];
        this.data = [];
        this.getDbInfo = await api.ETL.findDbInfo({
          dbname: newVal,
        });
      }
    },
    async dataSheetName(newVal) {
      if (Object.keys(this.getDbInfo.data).length !== 0) {
        const response = await api.ETL.queryTable({
          databaseInfo: JSON.stringify(this.getDbInfo.data),
          sql: `select * from "${newVal}"`,
        });
        this.setTable(response);
      }
    },
  },
  methods: {
    setTable(response) {
      this.columns = [
        {
          type: 'index',
          width: 60,
          align: 'center',
        },
      ];
      if (response.data && response.data.length) {
        for (let k of Object.keys(response.data[0])) {
          this.columns.push({
            title: k,
            key: k,
          });
        }
      }
      this.data = response.data.splice(0, 50);
    },
  },
};
</script>

<template>
  <Table
    :columns="columns"
    :data="data"
    size="small"
    highlight-row
    border>
  </Table>
</template>

<style lang="less" scoped>
</style>
